<!DOCTYPE html>
<html>

<head>
    <title>chart</title>
    <script src="chart.js"></script>
    <script src="chartjs-plugin-labels.min.js"></script>
    <!--https://emn178.github.io/chartjs-plugin-labels-->
    <!--https://emn178.github.io/chartjs-plugin-labels/samples/demo/-->
    <style>
        #layout {
            width: 100%;
            list-style-type: none;
        }

        #layout li {
            height: 300px;
            width: 300px;
            display: block;
            list-style-type: none;
            float: left;
        }
    </style>
</head>

<body>
    <ul id="layout">
        <li>
            <canvas id="pie1" width="400" height="400"></canvas>
        </li>
    </ul>
    <script>
        var pie1 = {
            type: 'pie',
            data: {
                labels: ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"],
                datasets: [{
                    data: [6, 1, 2, 1, 2, 3, 3, 1, 3, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)',
                        'rgba(255, 159, 64, 0.2)',
                        'rgba(255, 159, 64, 0.2)',
                        'rgba(255, 159, 64, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    label: 'Dataset 1'
                }]
            },
            options: {
                plugins: {
                    labels: [
                        {
                            render: 'label',
                            position: 'outside'
                        },
                        {
                            render: 'percentage',
                            precision: 2
                        }
                    ]
                }
            }
        };
        var draw = function (chartID, data) {
            var ctx = document.getElementById(chartID);
            var myChart = new Chart(ctx, data);
        }
        window.onload = function () {
            draw("pie1", pie1);
        }
    </script>
</body>

</html>